<template>
  <van-row class="main-menu">
    <van-nav-bar left-text="返回" title="安风体系评级动态管理" @click-left="doBack"/>
    <div class="waiquanbox">
        <div class="neiquanbox">
          <div class="demo-input-suffix">
            <el-row v-for="(item,index) in systemRatingTabel" :key="index +'1'" class="elColFexbox">
              <el-col :xs="12" :sm="3" class="elColFex">
                <i class="el-icon-medal fixedIcon "><span>{{index+1}}</span></i><b>{{item.dwmc}}</b>
              </el-col>
              <el-col :xs="12" :sm="7" class="elColFex">  
                <div class="historyClick" @click="historyClick(1,item.id)">
                  <h6>评级：</h6>
                  <div class="elColFexzuan">
                    <div class="cut" v-for="index of item.gradeDiamond" :key="index +'2'">
                      <div id="cut-diamond"></div>
                    </div>
                    <div class="grey" v-if="item.oldGradeDiamond > item.gradeDiamond">
                      <div class="cut"  v-for="index of item.oldGradeDiamond - item.gradeDiamond" :key="index +'4'">
                        <div id="cut-diamond"></div>
                      </div>
                    </div>
                  </div>
                  <div class="cutStar" v-for="index of item.gradeStar" :key="index +'3'">
                      <i class="el-icon-star-on elStar"></i>
                  </div>
                </div>
                
              </el-col>
              <el-col :xs="12" :sm="7" class="elColFex">  
                <div class="historyClick" @click="historyClick(2,item.id)">
                  <h6>挂牌：</h6>
                  <i class="el-icon-mobile elScale" :class="item.hangtag == 1 ? 'colorRed' : '' "><span>红牌</span></i>
                  <i class="el-icon-mobile elScale" :class="item.hangtag == 2 ? 'coloryellow' : '' "><span>黄牌</span></i>
                  <i class="el-icon-mobile elScale" :class="item.hangtag == 3 ? 'colorblue' : '' "><span>蓝牌</span></i>
                </div>
              </el-col>
              <el-col :xs="12" :sm="7" class="elColFex">  
                <div class="historyClick" @click="historyClick(3,item.id)">
                  <h6>警示：</h6>
                  <i class="el-icon-s-opportunity elScale" :class="item.warring == 3 ? 'colorRed' : '' "><span>红灯</span></i>
                  <i class="el-icon-s-opportunity elScale" :class="item.warring == 2 ? 'coloryellow' : '' "><span>黄灯</span></i>
                  <i class="el-icon-s-opportunity elScale" :class="item.warring == 1 ? 'colorblue' : '' "><span>蓝灯</span></i>
                </div>
              </el-col>
              <el-col :xs="20" :sm="22">
                <el-input
                  type="textarea"
                  :rows="3"
                  placeholder="请输入评价内容"
                  @click.native="historyClick(4,item.id)"
                  v-model="item.allReason">
                </el-input>
              </el-col>
              <el-col :xs="4" :sm="2" v-if="department_name == '超高压输电公司/公司本部/安全监管部（应急指挥中心）' ? true : false">  
                <div class="elEdit">
                  <el-button type="primary" v-if="!disjinzhi" icon="el-icon-edit" circle @click="pJedit(item)"></el-button>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>

        <!-- 编辑 -->
        <el-dialog
          title="编辑"
          :visible.sync="dialogVisible"
          @close="closeDialog"
          width="90%">
          <el-form ref="form" :model="form" label-width="100px">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="评级修改" name="first">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="单位名称">
                      <el-input v-model="form.dwmc" disabled></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="23" :sm="12">
                    <el-form-item label="钻石评级">
                      <el-select v-model="form.gradeDiamond" placeholder="请选择钻石级别">
                        <el-option label="0" value="0"></el-option>
                        <el-option label="1" value="1"></el-option>
                        <el-option label="2" value="2"></el-option>
                        <el-option label="3" value="3"></el-option>
                        <el-option label="4" value="4"></el-option>
                        <el-option label="5" value="5"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="23" :sm="12">
                    <el-form-item label="星星评级">
                      <el-select v-model="form.gradeStar" placeholder="请选择星星级别">
                        <el-option label="0" value="0"></el-option>
                        <el-option label="1" value="1"></el-option>
                        <el-option label="2" value="2"></el-option>
                        <el-option label="3" value="3"></el-option>
                        <el-option label="4" value="4"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <!-- <el-col :span="24">
                    <el-form-item label="评级调整原因">
                      <el-input type="textarea" @input="descInput" placeholder="1.调钻情况及原因：升（降）X钻，XXX。2.调星情况及原因：升（降）X钻，XXX。" v-model="form.gradeReason"></el-input>
                      <span class="numberV">{{txtVal}}/200</span>
                    </el-form-item>
                  </el-col> -->
                  <el-col :span="24">
                    <el-form-item label="评级调整原因">
                      <text-area :value="form.gradeReason" v-if="hackReset" :row="1" :placeholder="pinjholder" :maxlength="100" @change="onInputValueChange" />
                    </el-form-item>
                  </el-col>
                  <!-- <el-col :span="24" style="text-align: center;">
                    <el-button type="primary" @click="pinjiSubmit(1)" size="small">提 交</el-button>
                  </el-col> -->
                </el-row> 
              </el-tab-pane>
              <el-tab-pane label="挂牌修改" name="second">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="单位名称">
                      <el-input v-model="form.dwmc" disabled></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="挂牌">
                      <el-radio-group v-model="form.hangtag">
                        <el-radio :label="0">无牌</el-radio>
                        <el-radio :label="1">红牌</el-radio>
                        <el-radio :label="2">黄牌</el-radio>
                        <el-radio :label="3">蓝牌</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="挂牌调整原因">
                      <text-area :value="form.hangtagReason" v-if="hackReset" :row="1" :placeholder="guapholder" :maxlength="100" @change="onInputhangtagChange" />
                    </el-form-item>
                  </el-col>
                </el-row> 
              </el-tab-pane>
              <el-tab-pane label="追加评价" name="three">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="评价">
                      <!-- <el-input type="textarea" v-model="form.evaluate"></el-input> -->
                      <text-area :value="form.evaluate" v-if="hackReset" :row="2" @change="onInputevaluateChange" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-tab-pane>
  
              <el-col :span="24" style="text-align: center;">
                <el-button type="primary" @click="pinjiSubmit(indexSubmit)" size="small">提 交</el-button>
              </el-col>
            </el-tabs>

          </el-form>
          <!-- <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
          </span> -->
        </el-dialog>

        <!-- 历史记录 -->
        <el-dialog
          :showClose="false"
          :title="this.gaiBiantiel ==  1 ? '评级历史记录' : this.gaiBiantiel ==  2 ? '挂牌历史记录' : this.gaiBiantiel ==  3 ? '警示历史记录':'追加评价历史记录' "
          :visible.sync="historydialog"
          width="90%">
          <el-table
            :data="
            tablehistory.slice(
                (currentPage - 1) * pagesize,
                currentPage * pagesize
              )
            "
            style="width: 100%">
            <el-table-column
              prop=""
              label="调整级别"
              v-if="jshilshow"
              width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.type == 1">{{scope.row.gradeDiamond}}钻{{scope.row.gradeStar}}星</span>
                  <i class="el-icon-mobile elScale colorRed" v-if="scope.row.type == 2 && scope.row.hangtag == 1"><span>红牌</span></i>
                  <i class="el-icon-mobile elScale coloryellow" v-if="scope.row.type == 2 && scope.row.hangtag == 2"><span>黄牌</span></i>
                  <i class="el-icon-mobile elScale colorblue" v-if="scope.row.type == 2 && scope.row.hangtag == 3" ><span>蓝牌</span></i>
              </template>
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="调整时间"
              sortable
              width="180">
            </el-table-column>
            <el-table-column
              label="调整原因">
              <template slot-scope="scope">
                <el-tooltip effect="dark" :content="scope.row.type == 1 ? scope.row.gradeReason : scope.row.type == 2 ? scope.row.hangtagReason : scope.row.warringReason" placement="top">
                  <span v-if="scope.row.type == 1"> {{scope.row.gradeReason}}</span>
                  <span v-if="scope.row.type == 2">{{scope.row.hangtagReason}}</span>
                  <span v-if="scope.row.type == 3">{{scope.row.warringReason}}</span>                  
                  <span v-if="scope.row.type == 4">{{scope.row.evaluate}}</span>                  
                </el-tooltip> 
              </template>
            </el-table-column>
            <el-table-column
              prop="createBy"
              width="100"
              label="调整人员">
            </el-table-column>
            <el-table-column
              width="100"
              label="操作">
                <template slot-scope="scope">
                  <div v-if="gaiBiantiel == 1 || gaiBiantiel == 2 || gaiBiantiel == 4">
                    <el-button type="danger" v-if="!disjinzhi"  size="mini" icon="el-icon-delete" @click="getsecurityRiskDelete(scope.row.id,scope.row.riskId,gaiBiantiel)" circle></el-button>   
                  </div>
              </template>
            </el-table-column>

          </el-table>
          <div class="pagefanye right">
            <el-pagination
              @size-change="handleSizeChangeWenti"
              @current-change="handleCurrentChangeWenti"
              :current-page="currentPage"
              :page-sizes="[5, 10, 20, 40]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tablehistory.length"
            >
            </el-pagination>
          </div>
          <span slot="footer" class="dialog-footer">
            <!-- <el-button @click="historydialog = false">取 消</el-button> -->
            <el-button type="primary" size="mini" @click="historydialog = false">取 消</el-button>
          </span>
        </el-dialog>

    </div>
  </van-row>
</template>



<script>

import TextArea from '@/views/dealtwith/common/TextArea'
/* 交互api */
import { getsecurityRiskList,getsecurityRiskupdate,selectLogList,securityRiskDelete } from "../../api/companySystemRating";
import { Loading } from "element-ui";
export default {
  components: { TextArea },
  data() {
    return {
    username:'', //用户人
    pinjholder:'1.调钻情况及原因：升（降）X钻，XXX。2.调星情况及原因：升（降）X钻，XXX。',
    guapholder:'挂牌情况及原因：X牌，XXX。',
    indexSubmit:0,
    txtVal: 0,
    activeName: 'first',
    gaiBiantiel:'',
    tablehistory: [],
    historydialog:false,
    jshilshow:false,
    hackReset:true,
    form: {
        riskId:'',
        dwmc:'',  
        type:'', //1-评级 2-挂牌
        gradeDiamond: '',//钻石评级
        gradeStar:'',//星星评级
        gradeReason: '',//评级调整原因
        hangtag:'',//挂牌
        hangtagReason:'',//挂牌调整原因
        evaluate: '',//评价
        createBy: ''//用户人
      },
    dialogVisible:false,
    textarea: '',
    department_name: "",
    loading: false, //加载
    dwmc: "",
    departname: "",
    disjinzhi:false,
    tableData:[],
    currentPage: 1, //初始页
    pagesize: 10, // 每页的数据
    systemRatingTabel:[]
    };
  },
  created() {
    this.username = this.$store.state.authInfo.user.username
    console.log(this.username)
    //获取当前人用户部门
    if (!this.$store.state.authInfo.user.rectify[0].department_path) {
      this.department_name =
        this.$store.state.authInfo.user.roles.corp.assess_dept[0].department_name; //测试环境
      console.log(this.department_name);
    } else {
      this.department_name = this.$store.state.authInfo.user.rectify[0].department_path; //企业微信
      console.log(this.department_name);
      
    }
  },
  mounted(){
    //编辑
    this.getList()
  },

  methods: {
    closeDialog(){
      this.hackReset = false;//销毁组件
      // this.$nextTick(() => {
      //   this.hackReset = true;//重建组件
      // });
    },
    //评级textarea
     onInputValueChange(value) {
      this.form.gradeReason = value;
    },
    //挂牌textarea
    onInputhangtagChange(value){
      this.form.hangtagReason = value;
    },
    //评价
    onInputevaluateChange(value){
      this.form.evaluate = value;
    },
    //textarea显示字数
    // descInput(){
    //   this.txtVal = this.form.gradeReason.length;
    //   this.form.gradeReason = this.form.gradeReason.substring(0, 200)
    // },
    handleClick(tab, event) {
      console.log(tab, event);
      console.log(tab.index)
      if(tab.index == 0){
        this.indexSubmit = 0
      }else if(tab.index == 1){
        this.indexSubmit = 1
      }else if(tab.index == 2){
        this.indexSubmit = 2
      }
    },
    getList(){
      let loadingInstance = Loading.service({ fullscreen: true });
      let bmmc = this.department_name.split("/")
      console.log(bmmc)
      if(bmmc[1] == '公司本部'){
        if(this.department_name == '超高压输电公司/公司本部/安全监管部（应急指挥中心）'){
            this.disjinzhi = false
        }else{
            this.disjinzhi = true
        }
        getsecurityRiskList({dwmc:''})
          .then((res) => {
            loadingInstance.close();
            this.systemRatingTabel = res.data.retData
            this.systemRatingTabel.forEach(function(item) {
              item.allReason = `${item.gradeReason == '' ? '':'评级调整情况：' + item.gradeReason + ','}${item.hangtagReason == '' ? '':'挂牌调整情况：' + item.hangtagReason + ','}${item.warringReason == '' ? '':'警示调整情况：' + item.warringReason + ','}${item.evaluate == '' ? '':'追加评价：' + item.evaluate}`
            })
            console.log(this.systemRatingTabel,'111');
          })
          .catch((err) => {
            this.loading = false;
            console.log("报错！！！！！！！！！！！");
        });
      }else{
        getsecurityRiskList({dwmc:bmmc[1]})
        .then((res) => {
          this.disjinzhi = true
          loadingInstance.close();
          this.systemRatingTabel = res.data.retData
          // this.systemRatingTabel.forEach(item => {
          //   item.allReason = '评级调整情况：' + itme.gradeReason + ',' + '挂牌调整情况：' + item.hangtagReason + ',' + '警示调整情况：' + item.warringReason
          // })
          // console.log(this.systemRatingTabel,'111');
        })
        .catch((err) => {
          this.loading = false;
          console.log("报错！！！！！！！！！！！");
      });
      }
      
    },
    //编辑
    pJedit(item){
      this.hackReset = true;//重建组件
      this.form.riskId = item.id
      this.form.dwmc = item.dwmc
      this.form.gradeDiamond = item.gradeDiamond//钻石评级
      this.form.gradeStar = item.gradeStar//星星评级
      this.form.gradeReason = item.gradeReason//评级调整原因
      this.form.hangtag = item.hangtag//挂牌
      this.form.hangtagReason = item.hangtagReason//挂牌调整原因
      this.form.evaluate = item.evaluate//评价
      this.form.createBy = this.username// 用户人
      
      console.log(this.form)
      this.dialogVisible = true
    },
    //提交修改
    pinjiSubmit(index) {
      console.log(index)
      let obj = {}
        obj.riskId = this.form.riskId
        obj.createBy = this.form.createBy//用户人
      if(index == 0 ){
        obj.type = 1
        obj.gradeDiamond = parseInt(this.form.gradeDiamond)//钻石评级
        obj.gradeStar = parseInt(this.form.gradeStar)//星星评级
        obj.gradeReason = this.form.gradeReason//评级调整原因
      }else if(index == 1 ){
        obj.type = 2
        obj.hangtag = parseInt(this.form.hangtag)//挂牌
        obj.hangtagReason = this.form.hangtagReason//挂牌调整原因

      }else if(index == 2 ){
        obj.type = 4
        obj.evaluate = this.form.evaluate//评价
      }

      getsecurityRiskupdate(obj)
        .then((res) => {
          // this.systemRatingTabel = res.data.retData
          this.form.gradeReason = ''
          this.form.hangtagReason = ''
          this.form.evaluate = ''
          this.dialogVisible = false
          console.log(res);
          this.getList()
        })
        .catch((err) => {
          this.loading = false;
          console.log("报错！！！！！！！！！！！");
      });

    },
    //历史记录
    historyClick(index,id){
      console.log(id)
      this.jshilshow = true
      let obj = {}
      obj.riskId = id
      if(index == 1 ){
        this.gaiBiantiel = 1
        obj.type = 1
      }else if(index == 2 ){
        this.gaiBiantiel = 2
        obj.type = 2
      }else if(index == 3 ){
        this.gaiBiantiel = 3
        obj.type = 3
        this.jshilshow = false
      }else if(index == 4){
        this.gaiBiantiel = 4
        obj.type = 4
        this.jshilshow = false
      }
      selectLogList(obj)
        .then((res) => {
          this.tablehistory = res.data.retData
          this.historydialog = true
          console.log(this.tablehistory);
        })
        .catch((err) => {
          this.loading = false;
          console.log("报错！！！！！！！！！！！");
      });

    },
    //删除记录
    getsecurityRiskDelete(id,riskId,gaiBiantiel){
        let loadingInstance = Loading.service({ fullscreen: true });
        this.$confirm('确认删除该历史记录！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          securityRiskDelete({id:id})
            .then((res) => {
              this.historyClick(gaiBiantiel,riskId)
              loadingInstance.close();
              console.log(res);
            })
            .catch((err) => {
              loadingInstance.close();
              console.log("报错！！！！！！！！！！！");
          });
        }).catch(() => {
          loadingInstance.close();
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });


    },
    handleSizeChangeWenti(val) {
      this.pagesize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChangeWenti(val) {
      this.currentPage = val;
      console.log(`当前页: ${val}`);
    },
    doBack() {
      this.$router.back();
    },
  },
};
</script>

<style scoped lang="less">
body {
  background: #ccc;
  box-sizing: border-box;
}
.right {
  float: right;
}
.elColFexbox {
  margin-bottom: 20px;
}
.elColFexbox .fixedIcon{
  color: #ccc;
}
.elColFexbox:nth-child(1) .fixedIcon{
  color: #FE2D46;
}
.elColFexbox:nth-child(2) .fixedIcon{
  color: #df33c8;
}
.elColFexbox:nth-child(3) .fixedIcon{
  color: #FAA90E;
}
.fixedIcon{
  font-size: 38px;
  position:relative;
  float: left;
  span{
    position: absolute;
    left: 10px;
    top: 16px;
    font-size: 15px;
    width: 17.6px;
    text-align: center;
  }
}
.elColFex{
  h6{
    float: left;
    font-size: 16px;
    margin: 0;
    font-weight: unset;
    height: 100%;
    height: 70px;
  }
}
//钻石
.cut #cut-diamond {
  border-style: solid;
    border-color: transparent transparent red transparent;
    border-width: 0px 7px 9px 7px;
    height: 0;
    width: 10px;
    position: relative;
    // margin: 20px 0 0px 0;
}
.grey{
  display: inline-block;
}
.grey .cut #cut-diamond{
  border-color: transparent transparent #e1dede transparent;
}
.grey .cut #cut-diamond:after{
  border-color:#e1dede transparent transparent transparent;
}

.cut {
  display: inline-block;
  margin-right: 5px;
  height: 24px;
  // transform: scale(0.23);
    #cut-diamond:after {
    content: "";
    position: absolute;
    top: 9px;
    left: -7px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: red transparent transparent transparent;
    border-width: 14px 12px 0 12px;
  }
  #cut-diamond.star {
      border-color: #fd4 transparent transparent transparent;
      border-style: solid;
      border-top-width: 9.375px;
      border-right-width: 15px;
      border-left-width: 15px;
      height: 0;
      margin-top: 9.375px;
      margin-bottom: 6.02679px;
      position: relative;
      width: 0;
  }
  #cut-diamond.star:before,
  #cut-diamond.star:after {
      border-color: #fd4 transparent transparent transparent;
      border-style: solid;
      border-top-width: 9.375px;
      border-right-width: 15px;
      border-left-width: 15px;
      content: '';
      display: block;
      height: 0;
      left: -15px;
      position: absolute;
      top: -9.375px;
      width: 0;
  }
  #cut-diamond.star:before{
      transform: rotate(70deg);
  }
  #cut-diamond.star:after{
      transform: rotate(-70deg);
  }
}
.cutStar{
  height: 24px;
  display: inline-block;
}
.cutStar .el-icon-star-on{
  font-size: 27px;
  color: red ;
}
//钻石结束
.elColFex .elScale{ 
  font-size: 29px;
  display: flex;
  align-items: center;
  opacity: 0.13;
  display: inline-block;
  span{
    font-size: 12px;
    vertical-align: middle;
  }

}
.elColFex .elScale.colorRed,.colorRed{
  color: red;
  opacity: 1;
}
.elColFex .elScale.coloryellow,.coloryellow{
  color: #d0d03d;
  opacity: 1;
}
.elColFex .elScale.colorblue,.colorblue{
  color: blue;
  opacity: 1;
}
/deep/.el-textarea.is-disabled .el-textarea__inner {
  color: #4f5053;
}
.elEdit{
  width: 100%;
  height: 100%;
  margin-top: 15px;
  margin-left: 15px;
}
@media screen and (max-width: 768px) {
.elColFex h6{
    font-size: 14px;
}
}

/deep/.el-form-item__content{
  position: unset;
}
.historyClick{
  width: 100%;
  height: 100%;
  display: inline-block;
}

</style>
